<template>
    <view :data-theme="globPrimary">
        <u-navbar title="明细"></u-navbar>
        <view class="income-top">
            <view
                @click="open(1)"
                class="item"
                :class="status == 1 ? 'active' : ''"
                v-if="isTeacher == 1"
            >
                <view class="text">{{ teacherTitle }}</view>
                <view class="arrow"><u-icon name="arrow-down-fill" size="14"></u-icon></view>
            </view>
            <view @click="open(2)" class="item" :class="status == 2 ? 'active' : ''">
                <view class="text">{{ userTitle }}</view>
                <view class="arrow"><u-icon name="arrow-down-fill" size="14"></u-icon></view>
            </view>
            <text class="total">统计 {{ totalIncome | formatCurrency }}</text>
        </view>
        <view class="income-detail">
            <edu-mescroll-body @init="mescrollInit" @down="refresh" @up="reachBottom">
                <view class="item u-border-bottom" v-for="(item, index) in list" :key="index">
                    <view class="left">
                        <view class="name u-line-2">{{ item.note }}</view>
                        <view class="date">{{ item.create_time | timeFormat }}</view>
                    </view>
                    <view class="price" :class="[item.alter_type == 1 ? 'red' : '']"
                        >{{ item.alter_type == 1 ? '+' : '-' }}{{ item.num | formatCurrency }}</view
                    >
                </view>
            </edu-mescroll-body>
        </view>
        <u-popup
            v-model="show"
            mode="top"
            z-index="900"
            :custom-style="{ top: 'calc(44px + 108rpx)' }"
        >
            <!-- #ifdef MP-WEIXIN -->
            <view style="height: 70rpx; width: 100%"></view>
            <!-- #endif -->
            <view class="popup-box" v-if="status == 1">
                <view
                    class="popup-cell"
                    :class="[
                        teacherOptions.length - 1 != index ? 'u-border-bottom' : '',
                        teacherVal == item.value ? 'active' : '',
                    ]"
                    v-for="(item, index) in teacherOptions"
                    :key="item.value"
                    @click="changeTeacher(item.value)"
                >
                    {{ item.label }}
                </view>
            </view>
            <view class="popup-box" v-else-if="status == 2">
                <view
                    class="popup-cell"
                    :class="[
                        userOptions.length - 1 != index ? 'u-border-bottom' : '',
                        userVal == item.value ? 'active' : '',
                    ]"
                    v-for="(item, index) in userOptions"
                    :key="item.value"
                    @click="changeUser(item.value)"
                >
                    {{ item.label }}
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            list: [],
            totalIncome: 0,
            isTeacher: 0,
            show: false,
            status: 0,
            teacherVal: 'all',
            teacherTitle: '全部',
            teacherOptionsTitle: {
                all: '全部',
                teacher: '分成收益',
                user: '推广收益',
            },
            teacherOptions: [
                {
                    label: '全部',
                    value: 'all',
                },
                {
                    label: '分成收益',
                    value: 'teacher',
                },
                {
                    label: '推广收益',
                    value: 'user',
                },
            ],
            userVal: 'all',
            userTitle: '全部',
            userOptionsTitle: { all: '全部', month: '本月' },
            userOptions: [
                {
                    label: '全部',
                    value: 'all',
                },
                {
                    label: '本月',
                    value: 'month',
                },
            ],
        }
    },
    computed: {
        ...mapGetters({
            globPrimary: 'designSetting/getGlobTheme',
            globPrimaryColor: 'designSetting/getGlobThemeColor',
        }),
    },
    methods: {
        reachBottom(page) {
            this.$edu.api
                .getUserIncomeFlow({
                    page: page.num,
                    count: page.size,
                    time: this.userVal,
                    type: this.teacherVal,
                })
                .then((res) => {
                    const { data } = res

                    this.isTeacher = data.is_teacher
                    this.totalIncome = data.total_income

                    let total = data.flow.total
                    let list = data.flow.data

                    if (page.num == 1) this.list = []
                    this.list = this.list.concat(list)
                    this.mescroll.endBySize(res.data.flow.data.length, total)
                })
        },
        refresh() {
            this.mescroll.resetUpScroll()
        },
        open(index) {
            if (this.status == index) {
                this.status = 0
                this.show = false
            } else {
                this.status = index
                this.show = true
            }
        },
        changeTeacher(val) {
            this.show = false
            this.status = 0
            if (this.teacherVal == val) return
            this.teacherTitle = this.teacherOptionsTitle[val]
            this.teacherVal = val
            this.tabChange()
        },
        changeUser(val) {
            this.show = false
            this.status = 0
            if (this.userVal == val) return
            this.userTitle = this.userOptionsTitle[val]
            this.userVal = val
            this.tabChange()
        },
        tabChange() {
            this.mescroll.resetUpScroll(false)
            this.mescroll.scrollTo(0, 0)
        },
        alterType(type) {
            // 2、4、8时为减少，其他为增加
            if (type == 2 || type == 4 || type == 8) {
                return false
            } else {
                return true
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.income-top {
    position: relative;
    z-index: 910;
    display: flex;
    align-items: center;
    height: 108rpx;
    padding: 0 30rpx;
    background-color: #f7f7f7;
    .item {
        display: flex;
        align-items: center;
        .text {
            font-size: 28rpx;
            font-weight: 400;
            color: $edu-main-color;
        }
        .arrow {
            margin-left: 6rpx;
            transition: transform 0.3s;
            display: flex;
            align-items: center;
            color: $edu-main-color;
        }
        &.active {
            .text {
                @include text-color();
            }
            .arrow {
                @include text-color();
                transform: rotate(180deg);
            }
        }
    }
    .item + .item {
        margin-left: 50rpx;
    }
    .total {
        margin-left: auto;
        font-size: 30rpx;
        font-weight: 400;
        color: $edu-tips-color;
    }
}
.income-detail {
    min-height: calc(100vh - 44px - 108rpx);
    background-color: #fff;
    .item {
        padding: 40px 30rpx 24rpx 0;
        margin-left: 30rpx;
        display: flex;
        .name {
            max-width: 530rpx;
            font-size: 30rpx;
            font-weight: 400;
            line-height: 40rpx;
            color: $edu-main-color;
        }
        .date {
            margin-top: 25rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: $edu-content-color;
        }
        .price {
            margin-left: auto;
            font-size: 30rpx;
            font-weight: 500;
            color: $edu-main-color;
            &.red {
                color: $edu-price-color;
            }
        }
    }
}
.popup-box {
    /* #ifdef H5 */
    padding: 0 30rpx;
    /* #endif */

    /* #ifdef MP-WEIXIN */
    padding: 30rpx 30rpx 0 30rpx;
    /* #endif */

    /* #ifdef APP-PLUS */
    padding: 90rpx 30rpx 0 30rpx;
    /* #endif */
    background-color: #ffffff;
    .popup-cell {
        height: 86rpx;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-weight: 400;
        color: $edu-content-color;
        &.active {
            @include text-color();
        }
    }
}
</style>
